<template>
<div class="all" style="border-bottom: none">
  <div class="selectType">
    <div class="search_area">
      <el-input
          v-model="stock_search"
          class="w-50 m-2"
          placeholder="相关新闻搜索"
          :prefix-icon="Search"
          @keyup.enter="getJourList"
      />
    </div>
      <div class="tips" style="line-height: 37px">新闻类型:</div>
      <div class="selects">
          <el-select
                v-model="jourType"
                @change="getJourList"
                class="m-2"
                placeholder="新闻类型"
                size="default"
                style="width: 300px;margin-top: 5px"
                placement="bottom"
        >
            <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
            />
        </el-select>
     </div>
     <div class="selects">
          <el-select
                v-model="jourPropety"
                @change="getJourList"
                class="m-2"
                placeholder="新闻属性"
                size="default"
                style="width: 267px;margin-top: 5px"
                placement="bottom"
        >
            <el-option
                    v-for="item in options2"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
            />
        </el-select>
     </div>
  </div>
  <div class="all">
    <div class="news_origin">新闻来源：</div>
    <div>
      <el-select
          v-model="sure_origin"
          @change="getJourList"
          filterable
          placeholder="新闻来源"
          style="width: 287px;margin-top: 5px;"
      >
        <el-option
            v-for="item in news_origin"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
    </div>
  </div>
</div>
  <div class="TimeSelect">
    <div class="tips">时间范围:</div>
    <div class="block selects">
      <el-date-picker
          v-model="jourTime"
          @change="getJourList"
          type="datetimerange"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          format="YYYY-MM-DD HH:mm:ss"
          date-format="YYYY/MM/DD ddd"
          time-format="A hh:mm:ss"
          :disabled-date="disabledDate"
          style="width: 567px"
      />
    </div>
    <div class="TodayMessage">
      <el-button type="primary" size="small" @click="visitNewestMessage">看今日最新</el-button>
    </div>
    <div class="tips" style="margin-left: 13px;">自选股选择：</div>
    <el-select
        v-model="relatedStock"
        @change="getJourList"
        class="m-2"
        placeholder="自选股"
        style="width: 25%"
    >
      <el-option
          v-for="item in optionalStocks"
          :key="item.value"
          :label="item.label"
          :value="item.value"
      />
    </el-select>
  </div>
</template>

<script setup>
import {computed, onMounted, ref, toRaw, watch} from 'vue'
import {getAlljourType, getJournalismOriginList, getOptionalStockList, updateJournalismList} from "@/api/request.js";
import {useCounterStore} from "@/stores/counter.js";
import {ElMessage} from "element-plus";
import {Search} from "@element-plus/icons-vue";

const store=useCounterStore()

     //新闻类型
    const jourType = ref(0)
    //新闻属性
    const jourPropety = ref('all')
    //时间范围
    const jourTime = ref(null)
    //股票搜索
    let stock_search = ref('')
    //新闻来源
    let sure_origin = ref(0)
    //自选股
    let relatedStock=ref(null)

let propsStockId=null
let props = defineProps({
  stockId:Number
})
if(props.stockId){
  propsStockId=props.stockId
  store.findSuitableJournalisms.stockId=propsStockId
}


watch(stock_search,()=>{
  if(stock_search.value.length===0){
    getJourList()
  }
})

    //新闻所有类型
    const options = ref([
        {
            value: 0,
            label: '全部',
        }
    ])

    //获取新闻类型列表
    async function ManageJourType() {
        let data = (await getAlljourType()).records
        for (let i = 0; i < data.length; i++) {
            options.value.push({
                value: data[i].id,
                label: data[i].name,
            })
        }
    }
    ManageJourType()
    //

    const options2 = [
        {
            value: 'all',
            label: '全部',
        },
        {
            value: 'positive',
            label: '利好',
        },{
            value: 'neutral',
            label: '中性',
        },
        {
            value: 'negative',
            label: '利空',
        }
    ]

    let news_origin = ref([])
    //获取新闻来源列表
    async function getJournalismOriginLists() {
      news_origin.value=[]
      news_origin.value.push({
        value: 0,
        label: '全部'
      })
      let data = await getJournalismOriginList()
      for (let i = 0; i < data.length; i++) {
        news_origin.value.push({
          value: data[i].id,
          label: data[i].name
        })
      }
    }
    getJournalismOriginLists()

let optionalStocks=ref([])
    //获取自选股列表
async function getstockInfoList() {
  if(!sessionStorage.getItem('token')){
    ElMessage.error('请先登录')
    return
  }
  let message={userId:store.UserMessage.id}
  let data = (await getOptionalStockList(message)).records
  for (let i = 0; i < data.length; i++) {
    optionalStocks.value.push({
      value: data[i].stockId,
      label: data[i].stockCode+' '+data[i].stockName
    })
  }
}

async function InitClassMessage() {
  await getstockInfoList()
  let message = store.findSuitableJournalisms
  jourType.value = message.typeId === null ? 0 : message.typeId
  sure_origin.value = message.originId === null ? 0 : message.typeId
  relatedStock.value = propsStockId !== null ? +propsStockId : message.stockId     //数据类型转换
  jourPropety.value = message.sentiment === null ? 'all' : message.sentiment
  stock_search.value = message.searchContent
  jourTime.value = message.startTime ? [new Date(message.startTime), new Date(message.endTime)] : null
}
watch(()=>store.findSuitableJournalisms,InitClassMessage,{deep:true,immediate: true})

//根据条件获取新闻列表
function getJourList() {
  let messages = store.findSuitableJournalisms
  messages.sentiment = jourPropety.value
  messages.typeId = jourType.value
  messages.startTime = jourTime.value !== null ? jourTime.value[0] : null
  messages.endTime = jourTime.value !== null ? jourTime.value[1] : null
  messages.originId = sure_origin.value
  messages.stockId = relatedStock.value
  messages.searchContent = stock_search.value
  store.findSuitableJournalisms = messages
}

//时间选择器禁用今天及以后的日期
function disabledDate(time) {
  // 禁用今天及以后的日期
  return time.getTime() > Date.now();
}

async function visitNewestMessage() {
  let message = store.findSuitableJournalisms
  message.endTime = null
  message.startTime = null
  message.originId = null
  message.searchContent = ''
  message.sentiment = null
  message.stockId = null
  message.typeId = null
  message.keyword = ''
  store.OnlyVisitToday=true
  store.findSuitableJournalisms = message
}
</script>

<style scoped>
    .all{
        background-color: white;
        //border-bottom: 1px solid #caa9a9;
        /*padding: 10px 30% 7px 7px;*/
        display: flex;
    }
    .selectType{
        display: flex;
    }
    .tips{
        font-weight: 600;
        line-height: 30px;
        margin-left: 10px;
    }
    .TimeSelect{
        display: flex;
        margin-top: 5px;
      border-bottom: 1px solid #caa9a9;
    }
    .selects{
        margin-left: 13px;
        margin-bottom: 7px;
    }

    .demo-range .el-date-editor {
        margin: 8px;
    }

    .demo-range .el-range-separator {
        box-sizing: content-box;
    }
    .demo-datetime-picker .block {
        padding: 30px 0;
        text-align: center;
    }
    .search_area{
      display: flex;
      //margin-left: 47px;
    }
    .search_area div:nth-child(1){
      margin: 4px 34px 13px 10px;
      width: 247px;
    }
    #stock_search{
      font-size: 27px;
      background: #1890ff;
      margin: 5px 0 12px 0px;
      width: 88px;
      text-align: center;
      line-height: 32px;
      border-radius: 2px;
      cursor: pointer;
    }
    .news_origin{
      margin-left: 20px;
      line-height: 42px;
      font-weight: 600;
    }
    .TodayMessage{
      margin-left: 15px;
      padding-top: 4px;
      margin-right: 122px;
    }
    .block{
      margin-left: 16px;
    }
</style>